<template>
  <div class="product-list">
    <div class="title-add flex justify-around items-center h-32px mb-16px">
      <div class="flex item-center flex-1">
        <i class="wk wk-product text-24px mt-10px mr-4px color-#42526e"></i>
        <span class="clue-title mr-4px text-24px text-weight color-#42526e">产品管理</span>
      </div>
      <div class="flex item-center justify-end flex-1">
        <el-button
          v-hasPermi="['crm:product:create']"
          type="primary"
          color="#0052cc"
          @click="openForm('create')"
          ><el-icon class="mr-4px"><Edit /></el-icon> 新增产品</el-button
        >
      </div>
    </div>
    <div class="titles">
      <div class="search-box">
        <el-input v-model.trim="threeInOne" placeholder="产品名称" class="!w-200px">
          <template #append>
            <el-button @click="init" :icon="Search" />
          </template>
        </el-input>
      </div>
      <div class="flex item-center ml-24px">
        <div style="line-height: 32px" class="text-#172b4d mr-4px text-14px">显示:</div>
        <el-select
          v-model="queryParams.status"
          placeholder="请选择上架状态"
          clearable
          @change="init"
          class="!w-200px"
        >
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.CRM_PRODUCT_STATUS)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </div>
      <div class="flex item-center ml-24px">
        <div style="line-height: 32px" class="text-#172b4d mr-4px text-14px">创建时间:</div>
        <el-date-picker
          @change="init"
          v-model="queryParams.createTime"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
          class="!w-240px"
        />
      </div>
    </div>
    <div class="content" :style="{ height: fHeight - 128 + 'px' }">
      <el-table
        ref="sortTable"
        @sort-change="sortChange"
        v-loading="loading"
        :data="list"
        :stripe="true"
        :show-overflow-tooltip="true"
        :header-row-style="{ height: '48px', color: '#6b778c' }"
        style="width: 100%; cursor: pointer"
        @row-click="rowClick"
        border
      >
        <el-table-column fixed="left" type="selection" width="55" />
        <template v-for="column in meterHeaderList" :key="column.sort">
          <el-table-column
            :formatter="column.prop == 'price' ? erpPriceTableColumnFormatter : none"
            :sortable="column.custom"
            :width="column.width"
            v-if="column.show"
            :prop="column.prop"
            :label="column.label"
          >
            <template #default="scope">
              <div v-if="column.prop == 'name'">
                <span class="!color-#0052cc"> {{ scope.row.name }}</span>
              </div>
              <div v-if="column.prop == 'unit'">
                <dict-tag :type="DICT_TYPE.CRM_PRODUCT_UNIT" :value="scope.row.unit" />
              </div>
              <div v-if="column.prop == 'status'">
                <dict-tag :type="DICT_TYPE.CRM_PRODUCT_STATUS" :value="scope.row.status" />
              </div>
              <div v-if="column.prop == 'updateTime'">
                {{ formatDate(scope.row.updateTime) }}
              </div>
              <div v-if="column.prop == 'createTime'">
                {{ formatDate(scope.row.createTime) }}
              </div>
            </template>
          </el-table-column>
        </template>
      </el-table>
      <el-dropdown
        trigger="hover"
        placement="bottom"
        size="small"
        style="position: absolute; right: 0; top: 0"
      >
        <div class="header-sort">
          <el-icon><Operation /></el-icon>
        </div>
        <template #dropdown>
          <TableHeadSort style="right: 100px" :listData="meterHeaderList">
            <div class="mr-20px mt-0 flex justify-end">
              <el-button @click="handleDefaultValue" size="small">恢复默认</el-button>
              <el-button @click="saveTableSortValue" type="primary" size="small"
                >保存配置</el-button
              >
            </div>
          </TableHeadSort>
        </template>
      </el-dropdown>
    </div>
    <div class="page-box">
      <Pagination
        style="margin: 0 !important"
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
  <!-- 表单弹窗：添加/修改 -->
  <ProductForm ref="formRef" @success="getList" />
  <!-- 详情弹窗 -->
  <CrmSpec ref="crmSpec" @getPage="getList" />
</template>

<script setup>
import * as TableSort from '@/utils/sortTable'
import * as ProductApi from '@/api/crm/product'
import { Search, Operation, Edit } from '@element-plus/icons-vue'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import ProductForm from './ProductForm.vue'
const loading = ref(true)
const total = ref(0)
const list = ref([])
const queryParams = reactive({
  pageNo: 1,
  pageSize: 30,
  name: undefined,
  status: undefined,
  sortStr: '',
  sortFields: {},
  categoryId: undefined
})

const props = defineProps({
  categoryId: {
    type: Number
  },
  fHeight: Number
})
const meterHeaderList = ref()
/** 保存table配置 */
const saveTableSort = () => {
  TableSort.setMeterList(TableSort.DICT.PRODUCT, meterHeaderList.value)
  ElMessage.success('保存成功')
}
/** 恢复默认 */
const handleDefault = () => {
  meterHeaderList.value = TableSort.useDefault(TableSort.DICT.PRODUCT)
  ElMessage.success('保存成功')
}
/*初始化页数并搜索*/
const init = () => {
  queryParams.pageNo = 1
  getList()
}

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    if (Object.keys(queryParams.sortFields).length > 0) {
      queryParams.sortStr = JSON.stringify(queryParams.sortFields)
    }
    const data = await ProductApi.getProductPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}
/** 标签排序 */
const sortChange = (column) => {
  queryParams.sortFields[column.prop] = column.order == 'descending' ? 'desc' : 'asc'
  init()
}
watch(
  () => props.categoryId,
  async (newVal) => {
    queryParams.categoryId = newVal
    await getList()
  }
)
onMounted(() => {
  meterHeaderList.value = TableSort.getMeterList(TableSort.DICT.PRODUCT)
  getList()
})
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type, id) => {
  formRef.value.open(type, id)
}
const crmSpec = ref(null)
const rowClick = (row, column) => {
  const nowIds = list.value.map((item) => item.id)
  crmSpec.value.setDrawer(true, 'product', row.id, nowIds)
}
</script>

<style lang="scss" scoped>
.product-list {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px #172b4d1a;
  overflow: hidden;
  padding: 16px;
}
.titles {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.content {
  position: relative;
}
.page-box {
  width: calc(100% - 32px);
  padding: 16px;
  position: absolute;
  bottom: 10px;
  left: 0;
  height: 32px;
  text-align: right;
}
</style>
